<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="topimage">
      <img class="goods-image" width="100%" :src="goodsInfo.IMAGE1" alt="">
      <p class="goods-title">{{goodsInfo.NAME}}</p>
      <p class="price-wrap">
        <span class="goods-price">折扣价:￥{{goodsInfo.PRESENT_PRICE | moneyFilter}}</span>
        <span class="goods-origin-price">￥{{goodsInfo.PRESENT_PRICE+(1+Math.random()*3) | moneyFilter}}</span>
      </p>
    </div>
    <div class="">
      <van-tabs swipeable sticky>
        <van-tab title="商品详情">
          <div class="detail" v-html="goodsInfo.DETAIL"></div>
        </van-tab>
         <van-tab title="评论列表">
          评论
        </van-tab>
      </van-tabs>
    </div>
    <div class="">
      <van-goods-action>
        
        <van-goods-action-big-btn
          text="加入购物车"
          @click="addGoodsToCart"
        />
        <van-goods-action-big-btn
          primary
          text="立即购买"
        />
        <van-goods-action-mini-btn  
          :info="info"
          icon="cart-o"
          @click="AddCart"
          text="购物车"
        />
      </van-goods-action>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import {URL} from '@/servicesApi.config.js'
import {Toast} from 'vant'
import {toMoney} from '@/filter/moneyFilter.js'
export default {
  data() {
    return {
      goodsId:'',
      goodsInfo:{},
      info:0
    }
  },
  created(){
    this.goodsId = this.$route.query.goodsId?this.$route.query.goodsId:this.$route.params.goodsId
    this.getInfo();
    let cartInfo = localStorage.cartInfo?JSON.parse(localStorage.cartInfo):[];
    this.info=cartInfo.length;
  },
  filters:{
    moneyFilter(money){
      return toMoney(money)
    }
  },
  methods: {
    getInfo(){
      axios({
        url:URL.getDetailGoodsInfo,
        method:'post',
        data:{goodsId:this.goodsId}
      }).then(response=>{
        if(response.data.code==200&&response.data.message){
          this.goodsInfo = response.data.message
        }else{
          Toast('服务器错误，数据获取失败')
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    AddCart(){
      this.$router.push({name:'Cart'})
    },
    addGoodsToCart(){
      //取出本地购物车商品
      let cartInfo = localStorage.cartInfo?JSON.parse(localStorage.cartInfo):[]
      //如果有就去返回第一个goods，没有就返回undefined
      let isHaveGoods = cartInfo.find(cart=>cart.goodsId==this.goodsId)
      console.log(isHaveGoods)
      console.log(this.goodsInfo)
      console.log(cartInfo.length)
      this.info=cartInfo.length;
      this.info++
      if(!isHaveGoods){
        let newGoodsInfo = {
          goodsId:this.goodsInfo.ID,
          name:this.goodsInfo.NAME,
          price:this.goodsInfo.PRESENT_PRICE,
          image:this.goodsInfo.IMAGE1,
          count:1
        }
        cartInfo.push(newGoodsInfo)
        localStorage.cartInfo = JSON.stringify(cartInfo)
        Toast.success('添加成功')
      }
      // this.$router.push({name:'Cart'})
    }
  },
  components: {

  }
}
</script>

<style lang="scss" scoped>
  p{
    padding:0 1.2rem;
    margin: 0;
    padding-top: .3rem;
  }
  img.goods-image{
    padding-bottom: 5px;
    border:1px solid #fafafa;
    box-shadow: 0px 10px 30px 1px #ccc inset;
    box-sizing: border-box;
    background-color: #fff;
  }
  p.price-wrap{
    background: #fff;
    padding-bottom: .3rem;

  }
  p.goods-title{
    margin-top: -.22rem;
    background: #fff;
  }
  span.goods-price{
    padding:0 .3rem 0 .3rem;
    font-size: 14px;
    color: rgb(245, 132, 87);
  }
   span.goods-origin-price{
    padding:0;
    font-size: 12px;
    color: #555;
    text-decoration: line-through;
  }
  p.goods-title{

  }
  .detail{
    font-size: 0px;
    padding-bottom: 52px;
  }
  
</style>
